<template>
  <van-dialog :confirmButtonColor="confirmButtonColor" :cancelButtonColor="cancelButtonColor" v-model="show" v-bind="$attrs" v-on="$listeners" class="dialog">
    <div class="dialog__content">
      <slot></slot>
    </div>
  </van-dialog>
</template>

<script lang="ts">
import { Component, Vue, ModelSync, Prop } from 'vue-property-decorator';

@Component({
  name: 'Dialog'
})
export default class Dialog extends Vue {
  @Prop ({ default: '#547FFB' }) confirmButtonColor?: string;
  @Prop ({ default: '#f2f3ff' }) cancelButtonColor?: string;
  @ModelSync('value', 'change', { type: Boolean }) show!: boolean;
}
</script>

<style lang="scss" scoped>
.dialog {
  &__content {
    text-align: center;
    color: #4e5969;
    font-size: 15px;
    padding: 8px 24px 16px;
  }
}
</style>
